<template>
  <div class="container">
    <Card style="margin-bottom: 20px; margin-top: 10px; margin-left: 10px; margin-right: 10px">
      <Row v-if="Boolean(this.id)" style="height: 30px; margin-left: 15px; border-bottom: 1px dashed #f5f5f5; margin-bottom: 15px">
        <Breadcrumb separator=">">
          <BreadcrumbItem>学科管理</BreadcrumbItem>
          <BreadcrumbItem>{{this.$route.query.subjectName}}</BreadcrumbItem>
          <BreadcrumbItem style="font-weigth: 400">目录管理</BreadcrumbItem>
        </Breadcrumb>
      </Row>
      <Row type="flex" justify="space-between" align="middle">
        <Col style="margin-left: 15px">
          <b>目录名称</b>
          <Input style="width: 200px; margin-left: 15px" v-model="inputValue" />
          <b style="margin-left: 50px">状态</b>
          <Select style="width: 200px; margin-left: 15px" v-model="model1">
            <Option v-for="item in openList" :key="item.value" :value="item.value" :label="item.value" />
          </Select>
          <Button style="margin-left: 15px" @click="clearSubject">清除</Button>
          <Button type="primary" style="margin-left: 15px" @click="serachSubject">搜索</Button>
        </Col>
        <Col>
          <Button type="text" style="color:#409EFF" v-if="Boolean(this.id)" @click="$router.push({path:'/subjects/list'})">
            <Icon type="md-arrow-back" />
            返回学科
          </Button>
          <Button style="margin-right: 15px" type="error" @click="addSubject = true">
            <Icon type="md-create" />
            新增目录
          </Button>
        </Col>
      </Row>
      <Row style="background: #f4f4f5; margin-top: 15px">
        <Col style="margin: 10px">
          <div style="color: #9093b1">
            <Icon type="md-information-circle" />
            <span>数据一共{{ sumList }}条</span>
          </div>
        </Col>
      </Row>
      <Table :columns="columns1" :data="data1" style="margin-top: 15px" size="small">
        <template slot-scope="obj" slot="addDate">
          <strong>{{ obj.row.addDate | moment('YYYY-MM-DD HH-mm-ss') }}</strong>
        </template>
        <template slot-scope="{ row }" slot="state">
          <strong>{{ row.state == 1 ? '已开启' : '已禁用' }}</strong>
        </template>
        <template slot="operation" slot-scope="{ row }">
          <Button type="text" size="small" style="margin-right: 5px; color: #40aaff" @click="isUse(row.id, row.state)">{{ row.state === 1 ? '禁用' : '启用' }}</Button>
          <Button
            type="text"
            size="small"
            style="margin-right: 5px"
            @click="showModal(row.subjectID, row.directoryName)"
            :disabled="!Boolean(row.state)"
            :class="{ discolor: !Boolean(row.state), bluecolor: Boolean(row.state) }"
            >修改</Button
          >
          <Button type="text" size="small" style="margin-right: 5px" @click="delSubject(row)" :disabled="!Boolean(row.state)" :class="{ discolor: !Boolean(row.state), bluecolor: Boolean(row.state) }"
            >删除</Button
          >
        </template>
      </Table>
      <Row type="flex" justify="end">
        <Page :total="sumtotal" size="small" show-elevator show-sizer @on-change="changeCounts" :current="page" @on-page-size-change="changePageSize" :page-size="pagesize" />
      </Row>
    </Card>
    <Modal @on-visible-change="polymerScience" v-model="modifySubject" title="修改目录" @on-ok="modifyOk" @on-cancel="modifyCancel">
      <Form :model="formItem" :label-width="100" :rules="ruleValidate" ref="ruleForm">
        <FormItem label="所属目录" prop="subjectID">
          <Select placeholder="请选择" style="width: 100%" v-model="formItem1.subjectID">
            <Option v-for="item in science" :key="item.value" :value="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="目录名称" prop="directoryName">
          <Input v-model="formItem1.directoryName"></Input>
        </FormItem>
      </Form>
    </Modal>
    <addDirectory :addSubject.sync="addSubject"></addDirectory>
  </div>
</template>

<script>
import { list, remove, update, changeState } from '@/api/hmmm/directorys'
import { simple } from '@/api/hmmm/subjects'
import addDirectory from '../components/directorys-add.vue'
export default {
  data () {
    return {
      columns1: [
        {
          title: '序号',
          type: 'index',
          minWidth: 60
        },
        {
          title: '所属目录',
          key: 'subjectName',
          minWidth: 100
        },
        {
          title: '目录名称',
          key: 'directoryName',
          minWidth: 100
        },
        {
          title: '创建者',
          key: 'username',
          minWidth: 120
        },
        {
          title: '创建日期',
          slot: 'addDate',
          minWidth: 150
        },
        {
          title: '面试题数量',
          key: 'totals',
          minWidth: 120
        },
        {
          title: '状态',
          slot: 'state',
          minWidth: 80
        },
        {
          title: '操作',
          slot: 'operation',
          minWidth: 200
        }
      ],
      data1: [], // 目录数据
      sumList: '', // 数据一共多少条
      inputValue: '', // 搜索框的值
      modifySubject: false, // 修改目录弹窗
      addSubject: false, // 新增弹窗
      formItem1: {},
      formItem: {
        subjectName: '',
        directoryName: '',
        subjectID: '',
        state: 1
      },
      ruleValidate: {
        subjectID: [{ required: true, message: '目录不能为空', trigger: 'blur' }],
        directoryName: [{ required: true, message: '目录名称不能为空', trigger: 'blur' }]
      },
      searchSub: {}, // 搜索参数的保存
      page: 1,
      pagesize: 10,
      sumtotal: 0,
      science: [], // 所属标签下拉框
      model1: '', // 状态下拉框
      openList: [
        // 状态选项
        {
          value: '开启',
          label: '开启'
        },
        {
          value: '禁用',
          label: '禁用'
        }
      ],
      id: 0
    }
  },
  created () {
    this.getRoleList()
  },
  components: {
    addDirectory
  },
  watch: {
    $route: function (newId, oldId) {
      if (newId !== oldId) {
        this.getRoleList()
      }
    }
  },
  methods: {
    // 获取目录列表数据
    async getRoleList () {
      console.log(this.$route.query.subjectName)
      this.id = +this.$route.query.id
      console.log(Boolean(this.id))
      if (this.id) {
        const { data } = await list({ page: this.page, pagesize: this.pagesize, subjectID: this.id })
        console.log(data)
        this.data1 = data.items
        console.log(this.data1)
        this.sumList = data.counts
        this.sumtotal = data.counts
      } else {
        const data2 = await list({ page: this.page, pagesize: this.pagesize })
        console.log(data2)
        this.data1 = data2.data.items
        this.sumList = data2.data.counts
        this.sumtotal = data2.data.counts
      }
    },
    // 删除目录
    async delSubject (data) {
      try {
        await this.$confirm('确定删除？')
        await remove(data)
        this.getRoleList()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 修改目录
    async showModal (data1, name) {
      const { data } = await list({ page: this.page, pagesize: this.pagesize, subjectID: data1, directoryName: name })
      console.log(data)
      this.formItem1 = data.items[0]
      console.log(this.formItem1)
      this.modifySubject = true
    },
    // 点击确定修改目录并渲染页面
    async modifyOk () {
      this.$refs.ruleForm.validate()
      await update(this.formItem1)
      this.getRoleList()
      this.$Message.success('修改成功')
      this.$refs.ruleForm.resetFields()
      this.modifySubject = false
    },
    // 点击取消
    modifyCancel () {
      this.$refs.ruleForm.resetFields()
      this.modifySubject = false
    },
    // 搜索
    async serachSubject () {
      this.searchSub.directoryName = this.inputValue
      this.searchSub.state = this.model1 === '开启' ? 1 : 0
      const { data } = await list(this.searchSub)
      this.data1 = data.items
      this.sumList = data.counts
      this.sumtotal = data.counts
    },
    // 清除
    clearSubject () {
      this.inputValue = ''
      this.model1 = ''
      this.getRoleList()
    },
    // 页面跳转
    changeCounts (i) {
      this.page = i
      console.log(this.page)
      this.getRoleList()
    },
    changePageSize (s) {
      this.pagesize = s
      console.log(this.pagesize)
      this.getRoleList()
    },
    // 所属目录
    async polymerScience () {
      console.log(123)
      const { data } = await simple()
      this.science = data
      console.log(this.science)
      console.log(this.formItem1.subjectName)
    },
    // 状态
    async isUse (id, state) {
      // console.log(id)
      // console.log(state)
      if (state === 1) {
        await changeState({ id: id, state: 0 })
        this.$Message.success('操作成功')
        this.getRoleList()
      } else {
        await changeState({ id: id, state: 1 })
        this.$Message.success('操作成功')
        this.getRoleList()
      }
    }
  }
}
</script>

<style scoped >
/deep/.ivu-table th {
  color: #90a0c2;
  border-bottom: 1px solid gray;
}
.bluecolor {
  color: #40aaff;
}
.discolor {
  color: #c4c9db;
}
/deep/.ivu-breadcrumb > span:last-child {
  color: #999;
  font-size: 14px;
  font-weight: 400;
}
</style>
